<template>
  <div class="app-container">
    <!-- 容器类，用于包裹整个页面内容 -->
    <div class="header-msg">
      <!-- 头部消息，提示用户满足特定条件时的行车金额计算规则 -->
      满足以下情况时，行车金额（不包含附加费）需乘以特殊系数
    </div>

    <el-row>
      <!-- 行容器，用于布局 -->
      <el-col :span="2">
        <!-- 列容器，宽度为2 -->
        <div class="form-item">
          <!-- 表单项容器 -->
          <el-tag>{{ cityLevel.label }}</el-tag>
          <!-- 显示城市等级的标签 -->
        </div>
      </el-col>
      <el-col :span="22">
        <!-- 列容器，宽度为22 -->
        <div class="form-item" v-for="(item, index) in cityLevel.value" :key="index">
          <!-- 循环显示城市等级的具体值 -->
          <span class="special-time-item-value">{{ item }}</span>
          <!-- 显示具体的城市等级值 -->
        </div>
        <div style="float: right; ">
          <!-- 新增特殊时段的按钮，点击后打开新增对话框 -->
          <el-button @click="openUpdateDialog">修改</el-button>
          <!-- 修改特殊时段的按钮，点击后执行修改操作 -->
        </div>
      </el-col>
    </el-row>

    <el-divider />
    <!-- 分割线，用于分隔不同部分的内容 -->

    <el-row>
      <!-- 行容器，用于布局 -->
      <el-col :span="2">
        <!-- 列容器，宽度为2 -->
        <div class="form-item">
          <!-- 表单项容器 -->
          <el-tag>{{ vehicleType.label }}</el-tag>
          <!-- 显示车辆类型的标签 -->
        </div>
      </el-col>
      <el-col :span="22">
        <!-- 列容器，宽度为22 -->
        <div class="form-item" v-for="(item, index) in vehicleType.value" :key="index">
          <!-- 循环显示车辆类型的具体值 -->
          <span class="special-time-item-value">{{ item }}</span>
          <!-- 显示具体的车辆类型值 -->
        </div>
      </el-col>
    </el-row>

    <el-divider />
    <!-- 分割线，用于分隔不同部分的内容 -->

    <el-row>
      <!-- 行容器，用于布局 -->
      <el-col :span="2">
        <!-- 列容器，宽度为2 -->
        <div class="form-item">
          <!-- 表单项容器 -->
          <el-tag>{{ specialDate.label }}</el-tag>
          <!-- 显示特殊日期的标签 -->
        </div>
      </el-col>
      <el-col :span="22">
        <!-- 列容器，宽度为22 -->
        <div class="form-item">
          <!-- 表单项容器 -->
          <el-button @click="jumpToSpecialDatePicker">点击查看</el-button>
          <!-- 查看特殊日期的按钮，点击后跳转到特殊日期选择页面 -->
        </div>
      </el-col>
    </el-row>

    <el-divider />
    <!-- 分割线，用于分隔不同部分的内容 -->

    <el-row>
      <!-- 行容器，用于布局 -->
      <el-col :span="2">
        <!-- 列容器，宽度为2 -->
        <div class="special-time">
          <!-- 特殊时段容器 -->
          <el-tag>特殊时段</el-tag>
          <!-- 显示特殊时段的标签 -->
        </div>
      </el-col>
      <el-col :span="22">
        <!-- 列容器，宽度为22 -->
        <div class="special-time">
          <!-- 特殊时段容器 -->
          <div>
            <!-- 内容容器 -->
            <span v-for="(time, index) in specialTimes" :key="index" class="special-time-item-value">
              <!-- 循环显示特殊时段的具体值 -->
              {{ time.specialTimeTitle }} &nbsp; ： &nbsp; {{ time.startTime }} - {{ time.endTime }}
              <!-- 显示特殊时段的标题、开始时间和结束时间 -->
            </span>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-divider />
    <!-- 分割线，用于分隔不同部分的内容 -->

    <el-row>
      <!-- 行容器，用于布局 -->
      <el-col :span="24">
        <!-- 列容器，宽度为24 -->
        <div class="form-actions">
          <!-- 表单操作容器 -->
          <el-button type="primary" @click="openDialog">新增</el-button>
          <!-- 新增特殊时段的按钮，点击后打开新增对话框 -->
          <el-button @click="openUpdateDialog">修改</el-button>
          <!-- 修改特殊时段的按钮，点击后执行修改操作 -->
        </div>
      </el-col>
    </el-row>

    <!-- 添加特殊时段弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="添加特殊时段">
      <!-- 对话框组件，用于添加特殊时段 -->
      <el-form :model="specialTimeForm">
        <!-- 表单组件，用于输入特殊时段的相关信息 -->
        <el-form-item label="标题">
          <!-- 表单项，用于输入特殊时段的标题 -->
          <el-input v-model="specialTimeForm.specialTimeTitle" placeholder="请输入特殊时段标题"></el-input>
          <!-- 输入框，绑定特殊时段的标题 -->
        </el-form-item>
        <el-form-item label="开始时间">
          <!-- 表单项，用于选择特殊时段的开始时间 -->
          <el-time-picker
            v-model="specialTimeForm.startTime"
            placeholder="选择开始时间"
            format="HH:mm"
          ></el-time-picker>
          <!-- 时间选择器，绑定特殊时段的开始时间 -->
        </el-form-item>
        <el-form-item label="结束时间">
          <!-- 表单项，用于选择特殊时段的结束时间 -->
          <el-time-picker
            v-model="specialTimeForm.endTime"
            placeholder="选择结束时间"
            format="HH:mm"
          ></el-time-picker>
          <!-- 时间选择器，绑定特殊时段的结束时间 -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- 对话框底部操作区域 -->
        <el-button @click="dialogVisible = false">取消</el-button>
        <!-- 取消按钮，点击后关闭对话框 -->
        <el-button type="primary" @click="submitSpecialTime">提交</el-button>
        <!-- 提交按钮，点击后提交特殊时段信息 -->
      </div>
    </el-dialog>

    <!-- 修改数据弹窗 -->
    <el-dialog :visible.sync="updateDialogVisible" title="修改特殊系数">
      <el-form :model="updateForm">
        <el-form-item label="城市等级">
          <el-checkbox-group v-model="updateForm.cityLevel">
            <el-checkbox v-for="(level, index) in cityLevelOptions" :key="index" :label="level">{{ level }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="车辆类型">
          <el-checkbox-group v-model="updateForm.vehicleType">
            <el-checkbox v-for="(type, index) in vehicleTypeOptions" :key="index" :label="type">{{ type }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUpdate">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSh, listShTime, updateSh, addShTime } from '@/api/operate/sh';

export default {
  name: "SpecialCondition",
  data() {
    return {
      cityLevel: {
        label: "城市等级",
        value: []
      },
      // 城市等级对象，包含标签和值
      vehicleType: {
        label: "车辆类型",
        value: []
      },
      // 车辆类型对象，包含标签和值
      specialDate: {
        label: "特殊日期",
        value: "点击查看"
      },
      // 特殊日期对象，包含标签和值
      dialogVisible: false,
      // 控制新增特殊时段对话框的显示状态
      specialTimeForm: {
        specialTimeTitle: "",
        startTime: "",
        endTime: ""
      },
      // 新增特殊时段表单的数据对象
      specialTimes: [],
      // 存储当前显示的特殊时段列表
      specialTimeList: [],
      // 存储从后端获取的所有特殊时段列表
      vechileTypeList: [
        { id: 1, type: "经济型" },
        { id: 2, type: "舒适型" },
        { id: 3, type: "豪华型" },
        { id: 4, type: "货运" }
      ],
      // 车辆类型列表，包含车辆类型ID和名称
      specialShData: {},
      // 存储从后端获取的特殊系数数据
      updateDialogVisible: false,
      updateForm: {
        cityLevel: [], // 保存选中的城市等级
        vehicleType: [] // 保存选中的车辆类型 IDs
      },
      cityLevelOptions: [], // 用于存储城市等级选项
      vehicleTypeOptions: [] // 用于存储车辆类型选项
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
      // 打开新增特殊时段对话框
    },
    handleUpdate() {
      console.log("修改");
      // 处理修改操作，目前仅打印日志
    },
    async submitSpecialTime() {
      try {
        // 异步提交特殊时段信息
        const formatTime = (time) => {
          const date = new Date(time);
          const hours = String(date.getHours()).padStart(2, '0');
          const minutes = String(date.getMinutes()).padStart(2, '0');
          const seconds = String(date.getSeconds()).padStart(2, '0');
          return `${hours}:${minutes}:${seconds}`;
        };
        // 格式化时间为 "HH:mm:ss" 的辅助函数

        const formData = {
          specialTimeTitle: this.specialTimeForm.specialTimeTitle,
          startTime: formatTime(this.specialTimeForm.startTime),
          endTime: formatTime(this.specialTimeForm.endTime)
        };
        // 构建提交的数据对象

        const response = await addShTime(formData);
        // 调用 addShTime 方法提交数据

        if (response.code === 200) {
          const newId = response.msg;
          // 处理添加成功后的逻辑
          this.specialShData.specialTime += ',' + newId
          this.updateSh(this.specialShData)
          this.dialogVisible = false;
          this.resetSpecialTimeForm();
          this.getSpecialTimeList();
          this.getSpecialShData();
        }
      } catch (error) {
        console.error("提交特殊时段失败:", error);
        // 捕获并处理提交过程中出现的错误
      }
    },
    updateSh(newSpecialShData){
      updateSh(newSpecialShData).then(response=>{
        this.$message.success('修改成功')
      })
    },
    resetSpecialTimeForm() {
      this.specialTimeForm = {
        specialTimeTitle: "",
        startTime: "",
        endTime: ""
      };
      // 重置新增特殊时段表单的数据
    },
    jumpToSpecialDatePicker() {
      this.$router.push('/operate/operate/datepicker');
      // 跳转到特殊日期选择页面
    },
    openUpdateDialog() {
      // 回显选中的城市等级
      this.updateForm.cityLevel = [...this.cityLevel.value];

      // 回显选中的车辆类型（通过 ID 转换为名称）
      this.updateForm.vehicleType = this.specialShData.vehicleType.split(',').map(typeId => {
        const type = this.vechileTypeList.find(v => v.id.toString() === typeId);
        return type ? type.type : null;
      }).filter(Boolean); // 过滤掉无效值

      this.updateDialogVisible = true; // 打开修改对话框
    },
    async submitUpdate() {
      try {
        // 将城市等级和车辆类型数组合并为字符串
        this.specialShData.cityLevel = this.updateForm.cityLevel.join(',');

        // 更新车辆类型，若为空则设置为 ''
        this.specialShData.vehicleType = this.updateForm.vehicleType.length ?
          this.updateForm.vehicleType.join(',') : '';

        // 额外步骤：将中文文本转换为对应的 ID 并存储
        this.specialShData.vehicleType = this.updateForm.vehicleType.map(type => {
          const found = this.vechileTypeList.find(v => v.type === type);
          return found ? found.id : null;
        }).filter(Boolean).join(','); // 过滤掉无效值并合并为字符串

        // 调用更新方法
        await updateSh(this.specialShData);

        this.$message.success('修改成功');
        this.updateDialogVisible = false; // 关闭对话框
        this.getSpecialShData(); // 重新获取特殊系数数据
      } catch (error) {
        console.error("更新失败:", error);
      }
    },
    async getSpecialShData() {
      try {
        const response = await listSh();
        const data = response.data;

        this.specialShData = data;

        // 更新城市等级和车辆类型显示
        this.cityLevel.value = data.cityLevel.split(",");

        const vehicleTypes = data.vehicleType.split(",");
        this.vehicleType.value = vehicleTypes.map(typeId => {
          const type = this.vechileTypeList.find(v => v.id.toString() === typeId);
          return type ? type.type : null;
        }).filter(Boolean);

        // 初始化选项
        this.cityLevelOptions = ["一线城市", "二线城市", "三线城市"];
        this.vehicleTypeOptions = this.vechileTypeList.map(item => item.type);


        const specialTimes = data.specialTime.split(",");
        console.log(specialTimes)

        this.specialTimes = specialTimes.map(specialTimeId => {
          return this.specialTimeList.find(item => item.id.toString() === specialTimeId);
        }).filter(item => item); // 只保留有效条目
        console.log(this.specialTimes)
        // 解析并设置特殊时段值
        // console.log(this.specialTimes)

      } catch (error) {
        console.error("Error fetching specialShData:", error);
        // 捕获并处理获取数据过程中出现的错误
      }
    },
    async getSpecialTimeList() {
      try {
        const response = await listShTime();
        this.specialTimeList = response;
        // 获取所有特殊时段列表

        await this.getSpecialShData(); // 确保在获取特殊时段列表后再加载特殊系数数据
      } catch (error) {
        console.error("Error fetching specialTimeList:", error);
        // 捕获并处理获取数据过程中出现的错误
      }
    }
  },
  created() {
    this.getSpecialTimeList();
    this.getSpecialShData();
    // 在组件创建时初始化数据
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  /* 容器内边距 */
}
.header-msg {
  color: red;
  font-weight: bold;
  margin-bottom: 20px;
  /* 头部消息样式，红色加粗，底部间距 */
}
.form-item {
  margin-bottom: 20px;
  display: inline-block;
  /* 表单项底部间距 */
}
.special-time {
  margin-bottom: 10px;
  /* 特殊时段容器底部间距 */
}
.form-actions {
  margin-top: 20px;
  /* 表单操作顶部间距 */
}
.el-button {
  margin-right: 10px;
  /* 按钮右侧间距 */
}
.dialog-footer {
  text-align: right;
  /* 对话框底部操作区域右对齐 */
}
.special-time-item-value {
  color: #6290FF;
  border: 1px solid #6290FF;
  padding:5px;
  border-radius: 5px;
  margin: 5px;
  background-color: #E8F4FF;
  display: inline-block;
}
/* 特殊时段值样式，蓝色边框，圆角，内边距，背景色，块状展示 */
</style>

